<!--suppress ALL -->
<template>
    <div class="product-list">
      <ul>
        <div class="switch-btn btn-prev" key="prev">
          <img src="../../assets/home/point-prev.png" v-on:click="switchProduct(-1)">
        </div>
        <div class="innerWrap">
            <li v-for="(item,index) in productList" key="item" class="list-item circleContainer"  :class="item.hideMoving?'hide':''" >
              <productItem :info="productList[index]"></productItem>
            </li>
          <a href="javascript:void(0)" class="list-spot">
            <span v-for="(item,index) in productList" class="list-radio" :class="item.hideMoving?'':'active'" v-on:click="switchProductRadio(index)"></span>
          </a>
        </div>
        <div class="switch-btn btn-next" key="next">
          <img src="../../assets/home/point-next.png"  v-on:click="switchProduct(1)">
        </div>
      </ul>
    </div>
</template>

<script type="text/javascript">
  import productItem from './productItem'
  import Vue from 'vue'
    export default {
        data () {
            return {
               productList: [  // 产品信息列表
                 {
                   title: 'KR SHOP',
                   text: 'KR SHOP是一款全端的电子商务软件，帮助客户快速搭建电子商务平台，平台提供内部业务管理功能支持浏览、购物、结算、发货、售后的全流程管理，具备PC端到移动端的全端访问;系统具有多形式的促销手段，基于购物行为分析的精准推荐和搜索引擎增加用户粘度，竞店分析组件帮您洞察商业机会。',
                   link: ''
                 },
                 {
                   title: '移动互联网业务',
                   text: '移动开发服务提供原生APP（IOS、Android）、微信、手机网站开发服务，为客户提供一对一移动端解决方案，涵盖移动应用平台需求、设计、开发、测试、培训全流程服务，主要面向电子商务、企业应用、政务办公、文化教育、仓储物流等行业。公司拥有5年移动开发经验，积累了100+可重用移动开发模块，模块可自由组合；交互界面采用专业的手机交互滑动式设计，动效设计自然；图片压缩、裁剪最大程度节省流量；扁平化分层布局体验更具人性化。',
                   link: ''
                 },
                 {
                   title: '软件定制服务',
                   text: '公司技术储备库拥有超过10G的各种构件，可以通过积木搭建式开发快速满足客户需求。纳税评估系统应用大数据分析技术对报税单位数百项财务数据进行综合评估，发现报税问题进行预警和处理；系统多维度分析上报企业各项财务数据，按行业建立纳税指标评估峰值库，数据智能分析技术发现申报数据存在的异常情况，快速定位异常申报数据，提高纳税评估的工作效率。',
                   link: ''
                 },
                 {
                   title: '软件评测服务',
                   text: '软件评测中心于2014年11月取得了认可委颁布的CNAS、DILAC证书。中心现有工作人员15名，其中管理人员3名，软件评测人员12名。评测中心拥有与其评测业务相适应的仪器设备、软件30余台套。 软件评测中心根据总体单位和国军标要求承担军民品软件测评工作。使用测试软件QC、Testbed、TBrun，结合白盒、黑盒测试技术对软件项目进行单元测试、部件测试、配置项测试和系统测试，查找潜在的软件缺陷和隐患，对软件的质量进行评价。中心先后承担完成了200+软件产品的测试工作和定型测评工作，形成了详细的测试记录，给客户提交了完整的测试报告，并给产品的三方测试、定型、交付提供依据。',
                   link: ''
                 },
                 {
                   title: 'KR Sites',
                   text: '网站群KR Sites是一款多站点门户软件，KR Sites在同一架构下实现多站点统一建设，门户首要网站和子网站构成一个整体，多站点统一管理、信息统一呈现、内容统一搜索KR Sites的应用KR Sites是一款高伸缩性系统平台，既可以仅部署核心组件满足小微企业、政府部门宣传推广需求，也可以多服务器部署满足集团企业、政府部委多层级管理需求。系统提供门户、内容管理、流程、协作、商务智能等组件可以按需配置满足业务增长需求。',
                   link: ''
                 }
                   ],
               showList: [], // 控制li显示与隐藏
               showCount: 1, // 同时展示数量
               itemWidth: 600, // 单项宽度
               itemMargin: 0,
               curItem: 0
            }
        },
        created () {
          this.switchProduct(0)
          // 初始化productIndex
          for (let i = 0; i < this.productList.length; i++) {
              Vue.set(this.productList[i], 'index', i);
              if (i === 0) {
                Vue.set(this.productList[i], 'hideMoving', false)
              } else {
                Vue.set(this.productList[i], 'hideMoving', true)
              }
          }
        },
        components: {
            productItem
        },
        methods: {
            //  轮播切换
            switchProduct: function (direct) {  // direct
              const VUEOBJ = this;
              if ((VUEOBJ.curItem + direct) < 0) {
                VUEOBJ.curItem = VUEOBJ.curItem + direct + this.productList.length
              } else if ((VUEOBJ.curItem + direct) > this.productList.length - 1) {
                VUEOBJ.curItem = (VUEOBJ.curItem + direct) % this.productList.length
              } else {
                VUEOBJ.curItem = VUEOBJ.curItem + direct;
              }
              this.productList.forEach((item, index) => {
                  //  隐藏
                  Vue.set(item, 'hideMoving', true);
                  if (item.index === VUEOBJ.curItem) {
                      Vue.set(item, 'hideMoving', false)
                  }
              });
            },
            switchProductRadio: function (direct) {  // direct 下标
              const VUEOBJ = this;
              VUEOBJ.curItem = direct;
              this.productList.forEach((item, index) => {
                  Vue.set(item, 'hideMoving', true);
                  if (item.index === VUEOBJ.curItem) {
                    Vue.set(item, 'hideMoving', false);
                  }
              });
            }
        },
        computed: {
            getPosition: function () {  // 根据index计算位置
                let itemTotalWidth = this.itemWidth + this.itemMargin * 2;
                let positionList = [];
                this.productList.forEach(function (item, index) {
                  let itemPosition = index * itemTotalWidth
                  let positionObj = {
                    left: index * itemTotalWidth + 'px'
                  }
                  positionList.push(positionObj)
                })
                return positionList
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .product-list
      margin:0 auto
      & ul
        position: relative
        display: inline-block
        margin: 0 auto
        height: 441px
        overflow: hidden
        .innerWrap
          width: 100%
          height: 441px
          position: relative
          & .list-item
            position: absolute
            left:150px
            top:0
            display: inline-block
            vertical-align: top
            margin:0 26px
            opacity:1
            transition:all 0.7s
            z-index: 1
            &.hide
              transform scale(0)
              opacity:0
              z-index -1
          & .list-spot
            position:absolute
            bottom: 50px
            left: 0px
            width:100%
            text-align:center
            & .list-radio
                display: inline-block
                width: 20px
                height: 20px
                margin:0 10px
                cursor: pointer
                border-radius:50%
                background-color:rgba(0,0,0,0.2)
                &.active
                  background-color:#fff
        .switch-btn
          position: absolute
          height: 210px
          width: 50px
          z-index: 20
          &.btn-prev>a
            position: absolute
            right:25%
            top:50%
            transform:translate3d(0,-50%,0)
          &.btn-next>a
            position: absolute
            left:25%
            top:50%
            transform:translate3d(0,-50%,0)
          & img
            vertical-align middle
        .btn-prev
          left: 10px
          top: 50px
        .btn-next
          right: 10px
          top: 50px
</style>
